<template>
	<view class="page">
		<view class="main">
			<view class="top-line" :class="{ active: frame_active_dom > 1 }">
				<view class="main">
					<view class="top-line_header">
						<view class="img" :style="`--img: url(${ base_url }/static/tree_logo.png)`"></view>
						<view class="text">Hello!</view>
					</view>
					<view class="top-line_body">欢迎来到青年心灵树洞</view>
				</view>
				<view class="bottom"></view>
			</view>
			<view class="frame1 use-getin-getout" :class="{ active: frame_active_dom == 1 }" :style="`--img: url(${ base_url }/static/logo.svg)`">
				<view class="bottom-text">
					<view class="first-line">不必强撑坚强</view>
					<view class="second-line">「心灵树洞」做你无声的倾听者</view>
				</view>
			</view>
			<!-- 这个 frame1.5的目的是为了遮住底下的所有动画不播放 -->
			<view class="frame1-5"></view>
			<view class="frame2 use-getin-getout" :class="{ active: frame_active_dom == 2 }">
				<view class="main">
					<view class="header">
						<view>请选择你的性别</view>
					</view>
					<view class="body">
						<view class="item" @click="userinfo.sex = '男'" :class="{ selected: userinfo.sex == '男' }" :style="`--img: url(${ base_url }/static/boy.jpg); --text: '男生'`"></view>
						<view class="item" @click="userinfo.sex = '女'" :class="{ selected: userinfo.sex == '女' }" :style="`--img: url(${ base_url }/static/girl.jpg); --text: '女生'`"></view>
					</view>
					<view class="btn-line">
						<view class="prev-next-btn next-btn" @click="next_page"></view>
					</view>
				</view>
			</view>
			<view class="frame3 use-getin-getout" :class="{ active: frame_active_dom == 3 }">
				<view class="main">
					<view class="header">
						<view>请输入你的信息</view>
					</view>
					<view class="body">
						<view class="item" style="--text: '教育阶段'"><input type="text" class="userinfo-input" v-model="userinfo.grade"></view>
						<view class="item" style="--text: '所在学校'"><input type="text" class="userinfo-input" v-model="userinfo.college"></view>
						<view class="item" style="--text: '所在学院'"><input type="text" class="userinfo-input" v-model="userinfo.subCollege"></view>
						<view class="item" style="--text: '所有专业'"><input type="text" class="userinfo-input" v-model="userinfo.major"></view>
					</view>
					<view class="btn-line">
						<view class="prev-next-btn prev-btn" @click="frame_active_dom--"></view>
						<view class="prev-next-btn next-btn" @click="next_page"></view>
					</view>
				</view>
			</view>
			<view class="frame4 use-getin-getout" :class="{ active: frame_active_dom == 4 }">
				<view class="main">
					<view class="header">
						<view>请输入你的昵称</view>
					</view>
					<view class="body">
						<view class="item" @click="inputUsername">姓名</view>
						<view class="item" @click="randomUsername">匿名</view>
					</view>
					<!-- <view class="btn-line">
						<view class="prev-next-btn prev-btn" @click="frame_active_dom--"></view>
						<view class="prev-next-btn next-btn" @click="frame_active_dom++"></view>
					</view> -->
				</view>
			</view>
			<view class="frame5 use-getin-getout" :class="{ active: frame_active_dom == 5 }">
				<view class="main">
					<view class="header">
						<view>请输入你的昵称</view>
					</view>
					<view class="body">
						<view class="item">
							<input type="text" class="username-input"  v-model="userinfo.username" />
						</view>
					</view>
					<view class="btn-line">
						<view class="prev-next-btn prev-btn" @click="frame_active_dom = 4"></view>
						<view class="prev-next-btn next-btn" @click="next_page"></view>
					</view>
				</view>
			</view>
			<view class="frame6 use-getin-getout" :class="{ active: frame_active_dom == 6 }">
				<view class="main">
					<view class="header">
						<view>随机生成昵称</view>
					</view>
					<view class="body">
						<view class="item">
							<input type="text" class="username-input" v-model="userinfo.username" />
						</view>
					</view>
					<view class="btn-line">
						<view class="prev-next-btn prev-btn" @click="frame_active_dom = 4"></view>
						<view class="prev-next-btn next-btn" @click="next_page"></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { onMounted, ref, reactive } from 'vue';
import { base_url } from '../../api/config';
import { user } from '../../service/user';

// 帧动画控制
let frame_active_dom = ref(1);

// 用户信息
const userinfo = reactive({
	sex: '',
	grade: '',
	college: '',
	subCollege: '',
	major: '',
	username: '',
});

onMounted(async () => {
	try {
		// 登录微信
		let result = await user.login();
		if (!result) { throw new Error('登录失败'); }
		// 登录成功则继续
		uni.setStorageSync('token', result.token);
		setTimeout(() => {
			if (result.isNewUser) {
				// 走注册的逻辑
				user.showRegister(frame_active_dom);
			} else {
				// 直接跳转进入主页
				user.toMainPage();
			}
		}, 3000);
	} catch (err) {
		uni.showToast({
			duration: 1500,
			title: '登录失败'
		});
	}
});

function next_page() {
	console.log(frame_active_dom.value);
	if (frame_active_dom.value == 2) {
		user.showUserInfoInputPage(frame_active_dom, userinfo);
	} else if (frame_active_dom.value == 3) {
		user.showUserNameInputPage(frame_active_dom, userinfo);
	} else if (frame_active_dom.value == 5 || frame_active_dom.value == 6) {
		uni.showLoading({
			title: '正在连接服务器...'
		});
		user.checkAndToMainPage(userinfo.sex, userinfo.grade, userinfo.college, userinfo.subCollege, userinfo.major, userinfo.username);
	}
}

function inputUsername() {
	user.toUserNameInputPage(frame_active_dom);
}

function randomUsername() {
	// 取随机数
	let random = Math.floor(Math.random() * 1000000 + 1528231);
	// 显示用户名输入页面
	userinfo.username = `树小洞${ random }`;
	user.toRandomUserNamePage(frame_active_dom);
}

</script>

<style scoped lang="less">
@keyframes getin-before {
	0% {
		opacity: 0;
		transform: translateY(100vh);
	}
	100% {
		opacity: 0;
		transform: translateY(20vmin);
	}
}

@keyframes getin-after {
	0% {
		opacity: 0;
		transform: translateY(20vmin);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes getout-before {
	0% {
		opacity: 1;
		transform: translateY(0);
	}
	100% {
		opacity: 0;
		transform: translateY(20vmin);
	}
}
	
@keyframes getout-after {
	0% {
		opacity: 0;
		transform: translateY(20vmin);
	}
	100% {
		opacity: 0;
		transform: translateY(100vh);
	}
}
	
.use-getin-getout {
	transition: all 0.3s;
	
	&.active {
		display: block;
		animation: getin-before 0s ease-in-out 0s forwards, getin-after 0.3s ease-in-out 0s forwards;
	}

	&:not(.active) {
		animation: getout-before 0.3s ease-in-out 0s forwards, getout-after 0s ease-in-out 0.3s forwards;
	}
}

.prev-next-btn {
	width: 20vmin;
	height: 10vmin;
	background-color: rgb(255, 147, 0);
	border-radius: 5vmin;
	position: relative;
	
	&:before {
		content: "";
		display: block;
		width: 8vmin;
		height: 0.5vmin;
		background-color: #fff;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
}

.prev-btn {
	&:after {
		--size: 3vmin;
		content: "";
		display: block;
		width: var(--size);
		height: var(--size);
		border-top: 0.5vmin solid #fff;
		border-left: 0.5vmin solid #fff;
		position: absolute;
		top: 50%;
		left: 40%;
		transform: translate(-50%, -50%) rotate(-45deg);
	}
}

.next-btn {
	&:after {
		--size: 3vmin;
		content: "";
		display: block;
		width: var(--size);
		height: var(--size);
		border-top: 0.5vmin solid #fff;
		border-right: 0.5vmin solid #fff;
		position: absolute;
		top: 50%;
		left: 60%;
		transform: translate(-50%, -50%) rotate(45deg);
	}
}

.page {
	width: 100vw;
	height: 100vh;
	background-image: linear-gradient(to bottom, rgb(255, 212, 168), #fff);
	overflow: hidden;

	&>.main {
		position: relative;
	}
	
	.top-line {
		width: 100vw;
		height: 100vh;
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0;

        .main {
			width: 90vmin;
			height: 30vh;
			transition: all 0.3s;
			display: flex;
			flex-direction: column;
			justify-content: center;
			gap: 2vmin;
			margin: 0 auto;
			
			.top-line_header {
				font-size: 9.9vmin;
				display: flex;
				gap: 1.8vmin;
				align-items: flex-end;
				
				.img {
					--size: 18vmin;
					width: var(--size);
					height: var(--size);
					background-image: var(--img);
					background-size: contain;
					background-position: center;
					background-repeat: no-repeat;
				}
			}
			
			.top-line_body {
				font-size: 4.05vmin;
				padding-left: 2.7vmin;
			}
		}
		
		&.active {
			opacity: 1;
		}
	}
	
	.frame1 {
		width: 100vw;
		height: 100vh;
		background-image: var(--img), linear-gradient(to bottom, rgb(255, 212, 168), #fff);
		background-position: center;
		background-size: contain;
		background-repeat: no-repeat;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1000;
		
		.bottom-text {
			font-size: 4vmin;
			text-align: center;
			color: rgb(255, 212, 168);
			position: absolute;
			left: 50%;
			bottom: 20vmin;
			transform: translateX(-50%);
			white-space: nowrap;
		}
	}
	
	.frame1-5 {
		width: 100vw;
		height: 100vh;
		background-image: linear-gradient(to bottom, rgb(255, 212, 168), #fff);
		position: absolute;
		top: 0;
		left: 0;
		z-index: 500;
		animation: getout-after 0s ease-in-out 0.4s forwards;
	}

    .frame2 {
		width: 100vw;
		height: 100vh;
		position: absolute;
		top: 0;
		left: 0;
		
		.main {
			width: 90vw;
			height: 70vh;
			position: absolute;
			left: 50%;
			bottom: 0;
			transform: translateX(-50%);
			background-color: #fff;
			border-radius: 8vmin 8vmin 0 0;
			display: flex;
			flex-direction: column;
			
			.header {
				--h: 12vh;
				height: var(--h);
				display: flex;
				align-items: flex-end;
				justify-content: center;

				&>view {
					font-size: 5vmin;
					text-align: center;
					line-height: 10vh;
				}
			}
			
			.body {
				flex: 1;
				display: flex;
				justify-content: center;
				
				.item {
					--size: 20vh;
					width: var(--size);
					height: var(--size);
					background-image: var(--img);
					background-size: 80%;
					background-repeat: no-repeat;
					background-position: center;
					position: relative;

					&.selected {
						&::before {
							content: "";
							display: block;
							width: 100%;
							height: 100%;
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%, -50%);
							border: 1vw solid rgb(255, 147, 0);
							border-radius: 3vw;
						}
					}
					
					&:after {
						content: var(--text);
						font-size: 2vh;
						display: block;
						position: absolute;
						left: 50%;
						bottom: -5vmin;
						transform: translate(-50%, 100%);
					}
				}
			}
			
			.btn-line {
				height: 20vh;
				display: flex;
				gap: 5vmin;
				justify-content: center;
			}
		}
	}
	
    .frame3 {
		width: 100vw;
		height: 100vh;
		position: absolute;
		top: 0;
		left: 0;
		
		.main {
			width: 90vw;
			height: 70vh;
			position: absolute;
			left: 50%;
			bottom: 0;
			transform: translateX(-50%);
			background-color: #fff;
			border-radius: 8vmin 8vmin 0 0;
			display: flex;
			flex-direction: column;
			
			.header {
				--h: 12vh;
				height: var(--h);
				display: flex;
				align-items: flex-end;
				justify-content: center;

				&>view {
					font-size: 5vmin;
					text-align: center;
					line-height: 10vh;
				}
			}
			
			.body {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				align-items: center;
				
				.item {
					font-size: 3vmin;
					width: 80%;
					height: 7vh;
					background-color: rgb(255, 245, 234);
					border-radius: 7vh;
					box-sizing: border-box;
					display: flex;
					justify-content: flex-end;
					position: relative;

					.userinfo-input {
						--h: 7vh;
						width: 65%;
						height: var(--h);
						line-height: var(--h);
						box-sizing: border-box;
						padding: 3vmin;
						font-weight: 900;
					}

					&:after {
						content: var(--text);
						display: block;
						position: absolute;
						top: 50%;
						left: 30%;
						transform: translate(-100%, -50%);
					}
				}
			}
			
			.btn-line {
				height: 20vh;
				display: flex;
				gap: 5vmin;
				justify-content: center;
			}
		}
	}

	.frame4 {
		width: 100vw;
		height: 100vh;
		position: absolute;
		top: 0;
		left: 0;
		
		.main {
			width: 90vw;
			height: 70vh;
			position: absolute;
			left: 50%;
			bottom: 0;
			transform: translateX(-50%);
			background-color: #fff;
			border-radius: 8vmin 8vmin 0 0;
			display: flex;
			flex-direction: column;
			
			.header {
				--h: 12vh;
				height: var(--h);
				display: flex;
				align-items: flex-end;
				justify-content: center;

				&>view {
					font-size: 5vmin;
					text-align: center;
					line-height: 10vh;
				}
			}
			
			.body {
				flex: 1;
				display: flex;
				justify-content: center;
				justify-content: space-evenly;
				
				.item {
					--size: 30vmin;
					width: var(--size);
					height: var(--size);
					font-size: 5vmin;
					text-align: center;
					line-height: var(--size);
					border-radius: 50%;
					background-image: linear-gradient(to bottom, rgb(255, 212, 168), rgb(255, 250, 245));
				}
			}
			
			.btn-line {
				height: 20vh;
				display: flex;
				gap: 5vmin;
				justify-content: center;
			}
		}
	}

	.frame5, .frame6 {
		width: 100vw;
		height: 100vh;
		position: absolute;
		top: 0;
		left: 0;
		
		.main {
			width: 90vw;
			height: 70vh;
			position: absolute;
			left: 50%;
			bottom: 0;
			transform: translateX(-50%);
			background-color: #fff;
			border-radius: 8vmin 8vmin 0 0;
			display: flex;
			flex-direction: column;
			
			.header {
				--h: 12vh;
				height: var(--h);
				display: flex;
				align-items: flex-end;
				justify-content: center;

				&>view {
					font-size: 5vmin;
					text-align: center;
					line-height: 10vh;
				}
			}
			
			.body {
				flex: 1;
				display: flex;
				justify-content: center;
				justify-content: space-evenly;
				
				.item {
					--h: 15vmin;
					width: 60vmin;
					height: var(--h);
					font-size: 5vmin;
					line-height: var(--h);
					border-radius: 10vmin;
					background-color: rgb(255, 245, 234);
					transform: translateY(10vmin);

					.username-input {
                        width: 100%;
						height: 100%;
						box-sizing: border-box;
						padding: 5vmin;
					}
				}
			}

			.btn-line {
				height: 20vh;
				display: flex;
				gap: 5vmin;
				justify-content: center;
			}
		}
	}

}
</style>
